<template>
  <el-icon :size="size" :color="color">
    <component :is="iconName" />
  </el-icon>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import * as Icons from '@element-plus/icons-vue'

interface Props {
  name: string
  size?: number
  color?: string
}

const props = withDefaults(defineProps<Props>(), {
  size: 16,
  color: '#000'
})

const iconName = computed(() => {
  return Icons[props.name as keyof typeof Icons] || null
})
</script>